<template>
  <view class="container">
    <view v-if="showTabber" :style="'padding-bottom:'+safeAreaBottom+'px'" class="tabbar">
      <view class="navigator">
        <view class="navigator-item" v-for="(item,index) in list" :key="index" @click="onClick(item,index)">
          <image style="width: 80rpx;height:80rpx;" v-if="selectedIndex !== 1&&item.selectedIconPath&&!showPop" :src="item.iconPath" class="icon" mode=""></image>
          <image v-if="selectedIndex === index&&!showPop" :src="item.iconPath" class="icon" style="width: 68rpx;height:68rpx;" mode=""></image>
          <text v-else :class="['item-text']">{{selectedIndex==1?'':item.text}}</text>
        </view>
      </view>
    </view>
    <releasePopup @popStatus="popStatus" @close="showPop=false" v-if="showPop"></releasePopup>
  </view>
</template>

<script>
import releasePopup from './releasePopup.vue'
export default {
  name: "taber",
  components: {
    releasePopup
  },
  data() {
    return {
      showPop: false,
      showTabber: true,
      safeAreaBottom: uni.getStorageSync('safeAreaBottom'),
      selectedIndex: 1, // 标记
      list: [{
        "pagePath": "pages/index/index",
        "iconPath": "/static/images/tabbar/home.png",
        "selectedIconPath": "",
        "text": "首页"
      }, {
        "pagePath": "",
        "iconPath": "/static/images/tabbar/release.png",
        "selectedIconPath": "/static/images/tabbar/cancel.png",
        "text": ""
      }, {
        "pagePath": "pages/my/my",
        "iconPath": "/static/images/tabbar/my.png",
        "selectedIconPath": "",
        "text": "我的"
      },]
    }
  },
  created() {
    let routes = getCurrentPages();
    let curRoute = routes[routes.length - 1].route;
    let index = this.list.findIndex(item => {
      return curRoute == item.pagePath;
    });
    if (index > -1) {
      this.selectedIndex = index
    }
  },
  methods: {
    onClick(item, index) {
      if (index == 1) {
        this.showTabber = false;
        this.showPop = true;
      }
      let url = '';
      switch (index) {
        case 0:
          url = '/pages/index/index';
          break;
        case 1:
          url = '';
          break;
        case 2:
          url = '/pages/my/my';
          break;
      };
      uni.switchTab({
        url
      })

    },
    onSubmit(e) {
      console.log(e)
    },
    popStatus() {
      this.showPop = false;
      this.showTabber = true;
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
}

.tabbar {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 50%;
  background-color: #ffffff;
  transform: translateX(-50%);
  z-index: 999;
}

.navigator {
  width: 100%;
  height: 96rpx;
  border-top: 1rpx solid #e7e7e7;
  display: flex;
  align-items: center;

  &-item {
    width: calc(100% / 3);
    height: 96rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1998rpx 1998rpx 1998rpx 1998rpx;

    .icon {
      width: 68rpx;
      height: 68rpx;
    }

    .item-text {
      font-size: 36rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      font-weight: bold;
      color: #333333;
      line-height: 32rpx;
    }

    .text-active {
      font-size: 36rpx;
      font-weight: bold;
      color: #4185f6;
    }
  }
}
</style>